<!-- 任务详情 -->
<template>
    <uni-nav-bar title="详情信息" :statusBar="true" fixed :border="false" leftIcon="left"
                 backgroundColor="#2a7be9" color="#FFFFFF" @clickLeft="commonUtils.finish">
    </uni-nav-bar>

    <!-- 内容 -->
    <view class="content">
        <!-- 汇总信息 -->
        <view class="details">
            <view class="detailsDate">{{ selectDate }}</view>

            <view class="detailsContent">
                <!-- 接送款类型：早送、晚接、中调 -->
                <view>{{ itemData.connectTypeTxt }}</view>
                <!-- 线路名称 -->
                <view>{{ itemData.drivingName }}</view>
                <!-- 车牌号 -->
                <view>{{ itemData.securicarName }}</view>
            </view>

            <!-- 表格信息 -->
            <view style="border: 1rpx solid #DADBDE">
                <u-grid :border="true" col="4">
                    <!-- 表格头 -->
                    <u-grid-item v-for="(item,index) in gridList" :key="index">
                        <text class="gridItem1">{{ item.title }}</text>
                    </u-grid-item>
                    <!-- 表格内容 -->
                    <u-grid-item style="height: 100%" v-for="(item,index) in gridContentList" :key="index">
                        <text class="gridItem2">{{ item.value }}</text>
                    </u-grid-item>
                </u-grid>
            </view>
        </view>

        <!-- 时间线 -->
        <view class="timeLine">
            <u-steps :current="stepIndex" activeIcon="checkmark" inactiveIcon="arrow-right" activeColor="#1989FA">
                <u-steps-item v-for="(item,index) in stepDatas" :key="index" :title="item.title"
                              :desc="item.time">
                </u-steps-item>
            </u-steps>
        </view>

        <view class="listItem" v-for="(item,index) in detailList" :key="index">
            <!-- 头像 -->
            <image class="itemImg" v-if="item.facePicture" :src="Url.FILE_HOST+`${item.facePicture}`"
                   mode="aspectFill"/>
            <image class="itemImg" v-else src="@/static/images/icon_none.png" mode="aspectFit"/>

            <!-- 右侧信息 -->
            <view class="right">
                <view class="itemDetails">
                    <view class="itemTitle">职责：</view>
                    <view class="itemValue">{{ item.duty }}</view>
                </view>
                <view class="itemDetails">
                    <view class="itemTitle">姓名：</view>
                    <view class="itemValue">{{ item.nickName }}</view>
                </view>
                <view class="itemDetails">
                    <view class="itemTitle">工号：</view>
                    <view class="itemValue">{{ item.jobNumber }}</view>
                </view>
            </view>
        </view>

    </view>
</template>

<script setup>
import {getDetailsRequest} from "@/net/Api";
import {onLoad} from "@dcloudio/uni-app"
import * as Url from "@/net/Url";
import commonUtils from "@/utils/commonUtils";

const detailList = ref([])
const stepDatas = ref([])
const stepIndex = ref(-1)
const gridList = ref([
    {
        title: '尾箱'
    },
    {
        title: '中调箱'
    },
    {
        title: '凭证包'
    },
    {
        title: '总数'
    },
])
const gridContentList = ref([])
const itemData = ref({})
const selectDate = ref('')

computed(() => {
    return {
        Url
    }
})

onLoad((options) => {
    itemData.value = JSON.parse(decodeURIComponent(options.item))
    let taskId = itemData.value.id
    selectDate.value = options.selectDate
    getDetails(taskId)
})

/**
 * 获取详情数据请求
 */
const getDetails = (taskId) => {
    let params = {
        id: taskId
    }
    getDetailsRequest(params).then((res) => {
        let connect = res.data.connect
        let driver = res.data.driver
        let escortList = res.data.escortList
        let cashboxList = res.data.cashboxList
        let dataList = []

        //时间线数据
        let dateLine = res.data.dateLine
        stepDatas.value = convertToObjects(dateLine);
        //添加结尾默认空值
        stepDatas.value.push(
            {
                title: "",
                time: "",
            }
        )

        //根据是否存在时间显示当前进度
        stepIndex.value = -1
        for (let i = 0; i < stepDatas.value.length; i++) {
            if (stepDatas.value[i].time) {
                stepIndex.value = i
            }
        }

        if (connect) {
            connect.duty = "交接员"
            dataList.push(connect)
        }

        if (driver) {
            driver.duty = "驾驶员"
            dataList.push(driver)
        }

        escortList = escortList?.filter(item => item !== null);
        escortList?.forEach((item) => {
            item.duty = "押运员"
        })
        dataList.push(...escortList)

        //计算款箱数量
        getBoxCount(cashboxList)

        //列表数据
        detailList.value = dataList
    }).catch((err) => {

    })
}

// 转换函数
const convertToObjects = (arr) => {
    return arr.map(item => {
        const [title, time] = item.split(':'); // 按照 ":" 分割
        return {
            title: title ? title.trim() : '', // 去掉可能的多余空格
            time: time ? time.trim() : ''
        };
    });
};

/**
 * 获取款箱数量
 */
const getBoxCount = (result) => {
    let wBox = []
    let zBox = []
    let pBox = []
    let totalCount = result.length
    result.forEach((item) => {
        switch (item.typeName) {
            case '尾箱':
                wBox.push(item.name)
                break;
            case '中调箱':
                zBox.push(item.name)
                break;
            case '凭证包':
                pBox.push(item.name)
                break;
        }
    })

    gridContentList.value = [
        {
            value: wBox.toString() ? wBox.toString() : '无',
        },
        {
            value: zBox.toString() ? zBox.toString() : '无',
        },
        {
            value: pBox.toString() ? pBox.toString() : '无',
        },
        {
            value: totalCount
        },
    ]
}

</script>

<style scoped lang="scss">
page {
    background-color: #2a7be9;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    box-sizing: border-box;
}

.listItem {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 15rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
}

.itemImg {
    width: 230rpx;
    height: 290rpx;
}

.right {
    padding-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.itemDetails {
    display: flex;
    align-items: center;
    margin: 20rpx 0;
}

.itemTitle {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
}

.itemValue {
    flex: 1;
    font-size: 28rpx;
    color: #999999;
}

.timeLine {
    background-color: #FFFFFF;
    border-radius: 15rpx;
    box-sizing: border-box;
    padding: 30rpx 0;
    margin-bottom: 30rpx;
}

.details {
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 15rpx;
}

.detailsDate {
    font-size: 32rpx;
    color: #333333;
}

.detailsContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    color: #333333;
    margin: 15rpx 0;
}

.gridItem1 {
    font-size: 32rpx;
    color: #333333;
    padding: 15rpx 0;
}

.gridItem2 {
    font-size: 32rpx;
    color: #666666;
    padding: 15rpx;
}
</style>